<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>antd-modal</title>
  <link rel="stylesheet" type="text/css" href="modalplugin.css">
</head>
<body>
  <div>
    <ul>
      <li> 插件封装的核心思想和API配置 </li>
      <li> 插件封装的css三种处理关系 </li>
      <li> modal插件核心功能的研发 </li>
      <li> modal插件拖拽效果的实现 </li>
      <li> 基于发布订阅的回调函数管理 </li>
      <li> modal插件的模块化封装和调用 </li>
    </ul>

    <button id='btn1'>anniu1</button>
    <button in='btn2'>anniu2</button>
  

  </div>
<script src='./index.js'></script>
<script>
  function fn1(){console.log(1)}
  function fn2(){console.log(2)}
  function fn3(){console.log(3)}
  let modal1 = ModalPlugin({
    template: `<a href='#'>444</a>`,
    buttons:[
      {
        text: '123',
        click(){
          console.log(125456456)
          this.close()
        }
      }
    ]
  })

  modal1.on('close', fn1)
  modal1.on('close', fn2)
  modal1.on('close', fn3)
  btn1.onclick=function(){

    modal1.open()
  }

  /*
  
      <div class='dpn-dialog-'>
      <div class='dpn-title'>
        系统温馨提示
        <i class="dpn-close">X</i>
      </div>
      <div class="dpn-content">
        content
      </div>
      <div class="dpn-handle">
        <button>确定</button>
        <button>取消</button>
      </div>
    </div>
    <div class="dpn-model-"></div>
  */
</script>
</body>
</html>